<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>

<body>
    <svg id="svgout" width="600" height="600">
        <circle cx='0' cy='0' r='10' fill='red' stroke='none' />
        <g id='sun' transform='rotate(-30, 200, 200)' style="fill-opacity: 0.9">
            <circle cx='200' cy='200' r='60' fill='yellow' stroke='red'/>
            <ellipse cx='170' cy='180' rx='10' ry='6' fill='none' stroke='black' stroke-width='2' />
            <ellipse cx='230' cy='180' rx='10' ry='6' fill='none' stroke='black' stroke-width='2' />
            <circle cx='170' cy='180' r='6' fill='blue' />
            <circle cx='230' cy='180' r='6' fill='blue' />
            <line x1='185' y1='210' x2='215' y2='210' stroke='blue' stroke-width='2' />
            <path d='M185,210 C185,230 215,230 215,210' stroke='none' fill='pink' />
        </g>
        <polygon points='200,300 100,450 300,450' fill='green' />
    </svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <= 600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>